<template>

    <a-popover :title="fileName" >
        <div slot="content" style="text-align:center">
            <a @click="handleDown()">
                <a-icon type="cloud-download"/>
                下载
                <AkFileDown :url="url" ref="AkFileDown"/>
            </a>
        </div>
        <a-icon type="audio" :style="`fontSize:${imgHeight}px`" @click="handlerPreview"/>
        <a-modal :title="fileName" v-model="visible" @cancel="handleOk" @ok="handleOk">
            <div  v-if="!exported" >
                <p style="text-align:center">正在下载...</p>
                 <a-progress :percent="exportPercent" status="active" />
            </div>
            <av-line v-if="exported" :audio-src="fileLocalUrl"/>
        </a-modal>
    </a-popover> 
    
</template>
<script>
import AvLine from 'vue-audio-visual/src/components/AvLine'
import AkFileDown from './AkFileDown';
import {downFile} from '../../../api/manage';
import {isSameDomain} from '../../../utils/validate'
export default {
    name:"AkAudioPreview",
    describe:"音频预览",
    components:{AkFileDown, AvLine},
    props:{
        url:{
            type:String,
            required:true
        },
        fileName:{
            type:String,
            required:false,
            default:''
        },
        imgHeight:{
            type:Number,
            required:false,
            default:50
        }
    },
    data(){
        return {
            exporting:false,
            exportPercent:0,
            exported:false,
            visible:false,
            fileLocalUrl:'',
        }
    },
    methods:{
        handleDown(){
            this.$refs.AkFileDown.down();
        },
        handlerPreview(){
            if(!this.exported){
                if(isSameDomain(window.location.href, this.url)){
                    this.fileLocalUrl = this.url;
                    this.exported = true;
                    return;
                }
                this.exporting=true;
                this.exportPercent=0;
                downFile(this.url, null, (event)=>{
                    if(event.total){
                        this.exportPercent = parseFloat((event.loaded/event.total*100).toFixed(1));
                    }
                }).then(res=>{
                    this.fileLocalUrl = URL.createObjectURL(res.data);
                    this.exported = true;
                    this.exporting=false;
                    this.exportPercent=100;
                }).catch(e=>{
                    this.exporting=false;
                    this.exportPercent=0;
                    console.warn(e);
                    this.$message.warn("文件下载网络错误");
                });
            }
            this.visible = true;
        },
        handleOk(){
            this.visible = false;
            if(this.exported){
                this.exported = false;
                this.$nextTick(()=>{
                    this.exported = true;
                })
            }
            
        }

    }

}
</script>